var curr_page = 1;
var per_page = 8;
var num_pages = Math.ceil(alternatives.length / per_page);
if(num_pages == 0){
	num_pages = 1;
}



function makePaginator(){
	$("#paginator").paginate({
		count: num_pages,
		start: curr_page,
		display: 5,
		border: true,
		border_color: '#CD9F33',
		text_color: '#6F4632',
		background_color: '#FAF2E1',	
		border_hover_color: '#B18110',
		text_hover_color: '#6F4632',
		background_hover_color: '#DCC388', 
		images: false,
		mouse: 'press',
		onChange: function(page){
			DisplayPage(page);
			positionPaginator();
			$(".resize-200").load(function(){
				resize($(this), 200);
			});
			replaceIdByName();
			replaceIdByPic();
		}
	});
}

function DisplayPage(page){			
	var html = '';
	num = 0;
	curr_page = page;
	for (var i = 0; i < per_page; i++){
		var counter = ((page - 1) * per_page) + i;
		
		if (typeof(alternatives[counter]) == "undefined"){
			if(html == ''){
				html += '<br /><span class="medium-text">No Alternatives Found!<br /> Try relaxing your criteria.<br /><br /></span>';
			}
			break;
		}
		
		html += '<div class="single-alternative-container">';
		html += '<div class="img-container"><img class="resize-200" src="'+base_url+'resources/alternatives/' + alternatives[counter].alternative_pic + '" /></div>';
		html += '<div class="cnt-container normal-text">';
		html += '<span class="medium-text"><a href="'+alternatives[counter].alternative_link+'" target="_blank">'+alternatives[counter].alternative_name+'</a></span><br /></br />';
		html += 'Location: ' + alternatives[counter].alternative_location + '<br />';
		html += 'Timing: ' + alternatives[counter].alternative_time + '<br /><br />';
		html += 'Description: ' + alternatives[counter].alternative_desc + '<br />';
		html += '</div>';
		html += '<div style="clear:both"></div>';
		html += '</div>';
				
		num++;
	}

	
	$("#alternatives-container").html(html);
}


function positionPaginator(){
	var width = $('#alternatives-container').width();
	var length = num_pages > 5 ? 5 : num_pages;
	var actual = 60 + 60 + 25 * num_pages;
	$('#paginator').css('margin-left', (width - actual) / 2);
}


$(function(){
	makePaginator();
	DisplayPage(curr_page);
	positionPaginator();
});